<template>
  <div id="app">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>TODOLIST</span>
        <!-- 顶部按钮 -->
        <div class="headers">
          <div class="left">
            <el-button type="primary" @click="dialogVisible = true"
              >添加</el-button
            >
            <el-button type="warning" @click="manyDelete">批量删除</el-button>
          </div>
          <div class="right">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
        </div>
      </div>
      <!-- 表格展示部分 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="120" type="index" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="numberid"
          label="身份证号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="school"
          label="毕业学校"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.state"
              placement="top"
            >
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="毕业"
                inactive-value="未毕业"
              >
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-button
                type="success"
                icon="el-icon-edit"
                @click="editcontent(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click.native.prevent="deleteRow(scope.$index, tableData)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格結束部分 -->

      <!-- 添加按钮表格弹出 -->
      <el-dialog title="新增信息" :visible.sync="dialogVisible" width="30%">
        <!-- 添加元素表单开始-->
        <el-form
          :model="ruleForma"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForma.name"></el-input>
          </el-form-item>

          <el-form-item label="姓别" prop="sex">
            <el-radio-group v-model="sex">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="身份证号" prop="numberid">
            <el-input v-model="ruleForma.numberid"></el-input>
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input v-model="ruleForma.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="adress">
            <!-- <el-input v-model="address"></el-input> -->
            <!-- 省市级数据三级联动 -->
            <div class="dateInput">
              <div>
                <el-select
                  v-model="selectProvince"
                  filterable
                  size="small"
                  @change="selectProvinceFun($event)"
                  placeholder="请选择省份"
                >
                  <el-option
                    :value="item"
                    :label="item.label"
                    v-for="(item, index) in city"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
              -
              <div>
                <el-select
                  v-model="selectCity"
                  filterable
                  size="small"
                  @change="selectCityFun($event)"
                  placeholder="请选择城市"
                >
                  <el-option
                    :value="item"
                    :label="item.label"
                    v-for="(item, index) in cityList"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
              -
              <div>
                <el-select
                  v-model="selectArea"
                  filterable
                  size="small"
                  @change="selectAreaFun($event)"
                  placeholder="请选择区县"
                >
                  <el-option
                    :value="item"
                    :label="item.label"
                    v-for="(item, index) in areaList"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="毕业学校" prop="school">
            <el-input v-model="school"></el-input>
          </el-form-item>

          <el-form-item label="状态" prop="state">
            <el-select v-model="state">
              <el-option label="毕业" value="true"></el-option>
              <el-option label="未毕业" value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 添加元素表单结束 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 天机按钮表格结束 -->

      <!-- 编辑按钮表格弹出 -->
      <el-dialog title="修改信息" :visible.sync="visible" width="30%">
        <!-- 编辑元素表单开始-->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="姓别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="身份证号" prop="numberid">
            <el-input v-model="ruleForm.numberid"></el-input>
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>

          <el-form-item label="毕业学校" prop="school">
            <el-input v-model="ruleForm.school"></el-input>
          </el-form-item>

          <el-form-item label="状态" prop="state">
            <el-select v-model="ruleForm.state">
              <el-option label="毕业" value="已经毕业"></el-option>
              <el-option label="未毕业" value="未毕业"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 添加元素表单结束 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="closedata">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>

    <!-- 总人数统计开始 -->

    <div class="footer">
      <div class="footer_left">
        <el-card class="box-card1">
          <div class="text item">男性：{{ mancompu }}</div>
        </el-card>
      </div>
      <div class="footer_right">
        <el-card class="box-card1">
          <div class="text item">女性：{{ compu }}</div>
        </el-card>
      </div>
    </div>

    <!-- 总人数统计结束 -->

    <!-- <span>---------------------------------------</span> -->
    <!-- <helloword /> -->
  </div>
  <!-- <router-view></router-view> -->
</template>

<script>
// import helloword from "./components/HelloWorld.vue";
import axios from "axios";
export default {
  name: "App",
  // components: {
  //   helloword,
  // },
  data() {
    return {
      state: "",
      visible: false,
      radio1: "",
      dialogVisible: false,
      input: "",
      tableData: [],
      serachcontent: [],
      multipleSelection: [],
      sex: "",
      school: "",
      state: "",
      address: "",
      ruleForma: {
        name: "",
        numberid: "",
        phone: "",
      },
      // 表格数据
      ruleForm: {
        name: "",
        sex: "",
        numberid: "",
        phone: "",
        address: "",
        school: "",
        state: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        numberid: [
          { required: true, message: "请输入身份证号", trigger: "change" },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确合适的身份证号码",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请选择活动资源", trigger: "change" },
          {
            pattern:
              /^(((13[0-9])|(14[5-7])|(15[0-9])|(17[0-9])|(18[0-9]))+\d{8})$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],

        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },

      // 省市县级数据
      // 整个省市县数据
      city: [],
      // 被选中的市数据
      cityList: [],
      // 被选中的县数据
      areaList: [],
      selectProvince: {},
      selectCity: {},
      selectArea: {},
      province: "",
      citysa: "",
      area: "",
      editId: "",
      editindex: "",
    };
  },

  methods: {
    // 搜索内容展示
    search() {
      if (this.input == "" || this.input == null) {
        this.$message({
          message: "搜索框不能为空",
          type: "warning",
        });
        return;
      } else {
        // this.tableData.map((item) => {
        //   if (this.input == item.name) {
        //     console.log(item);
        //     this.serachcontent.push(item);
        //     this.tableData = this.serachcontent;
        //     return;
        //   }
        // });

        return this.tableData.filter((item) => {
          if (item.name.indexOf(this.input) > -1) {
            this.serachcontent.push(item);
            this.tableData = this.serachcontent;
          }
        });
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },

    // 删除操作
    deleteRow(index, rows) {
      console.log(index, rows);
      this.$confirm("确认删除此条数据吗？")
        .then(() => {
          rows.splice(index, 1);
        })
        .catch(() => {});
    },

    //批量删除数据
    manyDelete() {
      if (!this.multipleSelection.length) {
        this.$message("选择项不能为空");
        return;
      }

      this.$confirm("确认删除选中的数据吗？")
        .then(() => {
          this.multipleSelection.map((checkitem) => {
            this.tableData.map((item, index) => {
              if (item.id == checkitem.id) {
                this.tableData.splice(index, 1);
              }
            });
          });
        })
        .catch(() => {});
    },

    // 改变数组方法
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex);
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },

    // 提交数据
    commit() {
      if (!this.school || !this.sex || !this.state) {
        this.$message.error("内容不能为空");
        return;
      }
      let ids =
        Math.max(
          ...this.tableData.map((item) => {
            return item.id;
          })
        ) + 1;

      this.tableData.unshift({
        name: this.ruleForma.name,
        sex: this.sex,
        numberid: this.ruleForma.numberid,
        phone: this.ruleForma.phone,
        address: this.province + this.citysa + this.area,
        school: this.school,
        state: this.state,
        id: ids,
      });

      this.dialogVisible = false;
      this.ruleForma = {
        name: "",
        numberid: " ",
        phone: " ",
        id: "",
      };

      this.sex = "";
      this.school = "";
      this.state = "";
      this.address = "";
    },

    // 编辑数据
    editcontent(index, rows) {
      this.visible = true;
      // console.log(rows);
      this.editId = rows.id;
      this.editindex = index;
      // console.log(rows.id);
      this.ruleForm = {
        name: rows.name,
        sex: rows.sex,
        numberid: rows.numberid,
        phone: rows.phone,
        address: rows.address,
        school: rows.school,
        state: rows.state,
        id: rows.id,
      };
    },

    // 保存数据修改

    closedata() {
      this.visible = false;
      console.log(this.tableData[this.editindex].id);
      if (this.tableData[this.editindex].id == this.editId) {
        this.tableData[this.editindex].name = this.ruleForm.name;
        this.tableData[this.editindex].sex = this.ruleForm.sex;
        this.tableData[this.editindex].numberid = this.ruleForm.numberid;
        this.tableData[this.editindex].phone = this.ruleForm.phone;
        this.tableData[this.editindex].address = this.ruleForm.address;
        this.tableData[this.editindex].school = this.ruleForm.school;
        this.tableData[this.editindex].state = this.ruleForm.state;
      }

      //  第二种方法测试编辑
      // for (let i = 0; i < this.tableData.length; i++) {
      //   console.log(this.tableData[i].id);
      //   if (this.tableData[i].id === this.ruleForm.id) {
      //     this.tableData[i].name = this.ruleForm.name;
      //     this.tableData[i].sex = this.ruleForm.sex;
      //     this.tableData[i].numberid = this.ruleForm.numberid;
      //     this.tableData[i].phone = this.ruleForm.phone;
      //     this.tableData[i].address = this.ruleForm.address;
      //     this.tableData[i].school = this.ruleForm.school;
      //     this.tableData[i].state = this.ruleForm.state;
      //   }
      // }
    },

    // 修改状态
    // statechange(id, state) {
    //   console.log(id, state);
    //   if (state == "毕业") {
    //     this.state = true;
    //   } else {
    //     this.state = false;
    //   }
    // },

    getData() {
      axios.get("/data.json").then((res) => {
        // console.log(res);
        this.tableData = res.data;
      });
    },

    // 省市级三级联动方法
    selectProvinceFun(event) {
      if (event) {
        this.cityList = event.children;
        this.province = event.label;
        // console.log(this.province);
      } else {
        this.cityList = [];
      }
      this.areaList = [];
    },
    selectCityFun(event) {
      console.log(event);
      if (event) {
        this.areaList = event.children;
        this.citysa = event.label;
        // console.log(this.citysa);
      } else {
        this.areaList = [];
      }
    },
    selectAreaFun(event) {
      this.area = event.label;
      // console.log( this.area);
    },
  },
  created() {
    this.getData();
    axios.get("/city.json").then((res) => {
      console.log(res);
      this.city = res.data;
    });
  },

  computed: {
    // 计算女人的数量
    compu() {
      return this.tableData.filter((item) => item.sex == "女").length;
    },
    //计算男人的数量
    mancompu() {
      return this.tableData.filter((item) => item.sex == "男").length;
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    justify-content: space-between;
    align-items: center;
  }
  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.footer {
  display: flex;
  justify-content: start;
  .text {
    font-size: 18px;
  }

  // .item {
  //   padding: 10px 0;
  // }
  .box-card1 {
    width: 200px;
    height: 60px;
  }
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.top {
  text-align: center;
}
.item {
  margin: 4px;
}
.dateInput {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
